<template>
  <div class="header-component">
    <div>
      <!-- 搜索框 -->
      <div class="search-container">
        <i class="fas fa-search" style="font-size: 20px; margin-right: 8px; margin-left: 18px"></i>
        <input
            type="text"
            class="search-box"
            placeholder="搜索您感兴趣的帖子"
            v-model="searchQuery"
            @keyup.enter="handleSearch"
        />
      </div>
    </div>

    <!-- 导航栏 -->
    <div class="navbar">
      <el-tabs v-model="activeName" @tab-click="handleClick" tab-position="top">
        <el-tab-pane label="文物" name="first" ></el-tab-pane>
        <el-tab-pane label="名画" name="second"></el-tab-pane>
        <el-tab-pane label="旅游" name="third"></el-tab-pane>
        <el-tab-pane label="小众" name="fourth"></el-tab-pane>
      </el-tabs>
    </div>
    <!--排列帖子-->
    <div class="container">
      <div class="column">

        <div class="box large">
          <button @click="showDialog" class="image-button">
            <img :src="imageUrl" :style="{ width: '100%', height: '100%', 'object-fit': 'cover' }" alt="Photo">
          </button>
                    <!-- 弹出对话框 -->
 <div v-if="dialogVisible" class="dialog">
            <div class="dialog-close">
              <!-- 假设使用Font Awesome图标库 -->
              <i class="fas fa-times" @click="hideDialog"></i>
            </div>
            <div class="dialog-content">
              <!--对话框左侧图片 -->
              <div class="dialog-image">
                <img :src="imageUrl" alt="Dialog Image">
              </div>
              <!--对话框右侧 -->
              <div class="dialog-text">
                  <div class="row">
                    <div class="column">
                      <div class="id-image">
                        <img :src="userphoto1" alt="User Profile Image">
                      </div>
                    </div>
                    <div class="column">墨羽轻尘</div>
                    <div class="column">
                      <button class="button-follow">关注</button>
                    </div>
                  </div>
                  <div class="row text">
                    <p>✨🌸古风雅韵，轻摇一扇，梦回千年团扇情🌸✨<br>
                      穿越时光的缝隙，邂逅一抹不可复制的美——非遗团扇🌿。这不仅仅是一把扇，它是历史的低语，是匠人心血的结晶，更是东方美学的极致展现🎨。<br>
                      🌟让我们一起守护这份珍贵的非物质文化遗产，让团扇的美，继续在历史的长河中熠熠生辉，温暖每一个爱美的灵魂。快来收藏这份来自千年前的温柔吧！💖</p>
                  </div>
                  <div class="row text">
                    <p>————————————————————————</p>
                  </div>
                  <div class="conment_image">
                      <img :src="userphoto3" alt="User Profile Image">
                      <div class="conment">
                        <div class="conment_name"><p>逐风：</p></div>
                        <div class="conment_conment"><p>银烛秋光冷画屏，轻罗小扇扑流萤。</p></div>
                      </div>
                  </div>
                <div class="row text">
                  <p>共200条评论</p>
                </div>


                <div class="row text"></div>
                  <div class="row">
                    <div class="column">
                      <input type="text" placeholder="说点什么">
                    </div>
                    <div class="column">
                      <button class="button-heart"><i class="far fa-heart" />{{ 100 }}</button>
                    </div>
                    <div class="column">
                      <button class="button-heart"><i class="far fa-comment-alt" />{{ 100 }}</button>
                    </div>
                    <div class="column">
                      <button class="button-heart"><i class="far fa-external-link" />{{ 100 }}</button>
                    </div>
                  </div>
              </div>
            </div>
          </div>
        </div>

        <div class="box medium">
          <button @click="showDialog" class="image-button">
            <img :src="imageUrl1" :style="{ width: '100%', height: '100%', 'object-fit': 'cover' }" alt="Photo">
          </button>
        </div>
        <div class="box small">
        </div>
        <div class="box small">
          <img :src="imageUr3" :style="{ width: '100%', height: '100%', 'object-fit': 'cover' }" alt="Photo">
        </div>

        <div class="box large">
          <img :src="imageUrl4" :style="{ width: '100%', height: '100%', 'object-fit': 'cover' }" alt="Photo">
        </div>

        <div class="box medium">
          <img :src="imageUrl5" :style="{ width: '100%', height: '100%', 'object-fit': 'cover' }" alt="Photo">
        </div>
      </div>
      <div class="column">
        <div class="box medium">
          <button @click="showDialog" class="image-button">
            <img :src="imageUrl2" :style="{ width: '100%', height: '100%', 'object-fit': 'cover' }" alt="Photo">
          </button>
        </div>
        <div class="box large">
          <button @click="showDialog" class="image-button">
            <img :src="imageUrl7" :style="{ width: '100%', height: '100%', 'object-fit': 'cover' }" alt="Photo">
          </button>
        </div>
        <div class="box small"></div>
        <div class="box medium"></div>
        <div class="box large"></div>
        <div class="box small"></div>
      </div>
      <div class="column">
        <div class="box small">
          <button @click="showDialog" class="image-button">
            <img :src="imageUrl3" :style="{ width: '100%', height: '100%', 'object-fit': 'cover' }" alt="Photo">
          </button>
        </div>
        <div class="box medium">
          <button @click="showDialog" class="image-button">
            <img :src="imageUrl8" :style="{ width: '100%', height: '100%', 'object-fit': 'cover' }" alt="Photo">
          </button>
        </div>
        <div class="box large">
          <button @click="showDialog" class="image-button">
            <img :src="imageUrl12" :style="{ width: '100%', height: '100%', 'object-fit': 'cover' }" alt="Photo">
          </button>
        </div>
        <div class="box small"></div>
        <div class="box medium"></div>
        <div class="box large"></div>
      </div>
      <div class="column">
        <div class="box medium">
          <button @click="showDialog" class="image-button">
            <img :src="imageUrl4" :style="{ width: '100%', height: '100%', 'object-fit': 'cover' }" alt="Photo">
          </button>
        </div>
        <div class="box large">
          <button @click="showDialog" class="image-button">
            <img :src="imageUrl10" :style="{ width: '100%', height: '100%', 'object-fit': 'cover' }" alt="Photo">
          </button>
        </div>
        <div class="box small"></div>
        <div class="box medium"></div>
        <div class="box large"></div>
        <div class="box small"></div>
      </div>
      <div class="column">
        <div class="box large">
          <button @click="showDialog" class="image-button">
            <img :src="imageUrl5" :style="{ width: '100%', height: '100%', 'object-fit': 'cover' }" alt="Photo">
          </button>
        </div>
        <div class="box medium">
          <button @click="showDialog" class="image-button">
            <img :src="imageUrl9" :style="{ width: '100%', height: '100%', 'object-fit': 'cover' }" alt="Photo">
          </button>
        </div>
        <div class="box small"></div>
        <div class="box small"></div>
        <div class="box large"></div>
        <div class="box medium"></div>
      </div>
      <div class="column">
        <div class="box small">
          <button @click="showDialog" class="image-button">
            <img :src="imageUrl6" :style="{ width: '100%', height: '100%', 'object-fit': 'cover' }" alt="Photo">
          </button>
        </div>
        <div class="box large">
          <button @click="showDialog" class="image-button">
            <img :src="imageUrl11" :style="{ width: '100%', height: '100%', 'object-fit': 'cover' }" alt="Photo">
          </button>
        </div>
        <div class="box medium"></div>
        <div class="box large"></div>
        <div class="box small"></div>
        <div class="box medium"></div>
      </div>
    </div>
  </div>

  <button @click="send_post" class="floating-button">
      发帖
  </button>

</template>

<script>
import ok from '@/assets/communite/ok.png'
import post from '@/assets/communite/photo/团扇.png'
import image1 from '@/assets/communite/photo/剪纸.png'
import image2 from '@/assets/communite/photo/泥塑.png'
import image3 from '@/assets/communite/photo/银饰.png'
import image4 from '@/assets/communite/photo/团扇.png'
import image5 from '@/assets/communite/photo/木雕.png'
import image6 from '@/assets/communite/photo/木雕1.png'
import image7 from '@/assets/communite/photo/image7.png'
import image8 from '@/assets/communite/photo/image8.png'
import image9 from '@/assets/communite/photo/扎染.png'
import image10 from '@/assets/communite/photo/木雕2.png'
import image11 from '@/assets/communite/photo/image11.png'
import image12 from '@/assets/communite/photo/image12.png'
import userphoto1 from '@/assets/user/userphoto1.png'
import userphoto3 from '@/assets/user/userphoto3.png'

const bannerList = ref([]);
const getBanner = async() => {
  const res = await getBannerAPI();
  console.log(res);
  bannerList.value = res.result;
};


export default {
  name: 'HeaderComponent',
  data() {
    return {
      imageUrl: post, // 图片的URL
      imageUrl1:image1,
      imageUrl2:image2,
      imageUrl3:image3,
      imageUrl4:image4,
      imageUrl5:image5,
      imageUrl6:image6,
      imageUrl7:image7,
      imageUrl8:image8,
      imageUrl9:image9,
      imageUrl10:image10,
      imageUrl11:image11,
      imageUrl12:image12,
      userphoto1:userphoto1,
      userphoto3:userphoto3,

      dialogImageUrl: ok, // 对话框中的图片URL
      dialogText: '这是一段显示在对话框右侧的文本。', // 对话框中的文本
      dialogVisible: false, // 控制对话框的显示
      searchQuery: '', // 搜索框绑定的数据
      navItems: [ // 导航栏项目
        { id: 1, name: 'first', path: '/' },
        { id: 2, name: 'second', path: '/about' },
        { id: 3, name: 'third', path: '/services' },
        { id: 4, name: 'fourth', path: '/contact' }
      ],
      activeName: 'second',
    };
  },
  methods: {
    handleSearch() {
      if (this.searchQuery.trim() !== '') {
        // 执行搜索逻辑
        console.log('搜索内容:', this.searchQuery);
        // 这里可以替换为实际的搜索API调用或方法
        // 例如：this.fetchData(this.searchQuery);
      }
    },
    handleClick(tab, event) {
      console.log(tab, event)
    },
    showDialog() {
      this.dialogVisible = true;
    },
    hideDialog() {
      this.dialogVisible = false;
    },
    send_post(){
      this.$router.push('/addpost');
    }
  },
};
</script>

<style scoped>
.title{
  font-size: 25px;
  color: #000;
}
.content{
  font-size: 20px;
  color: #000;
}

.conment_image{
  display: flex;
  flex-direction: row;
  justify-content: start;
  align-items: center;

.conment{
    display: flex;
    flex-direction: column;
    justify-content: center;
    .conment_name{
      display: flex;
      font-size: small;
      color: #5D5B59;
      margin-bottom: -30px;
    }
    .conment_conment{
      display: flex;
      font-size: medium;
    }
  }
}

.conment_image img {
  width: 45px; /* 或者你想要的任何尺寸 */
  height: 40px; /* 保持宽高一致以形成圆形 */
  border-radius: 50%; /* 将边角设置为圆形 */
  object-fit: cover; /* 确保图片覆盖整个区域而不失真 */
  display: block; /* 移除图片下方的默认间隙（如果有的话） */
  margin-right: 2%;
}

.column input {
  flex:2;
  width: 100%; /* 输入框宽度填满列 */
  border-radius: 5px;
  box-sizing: border-box; /* 包含padding和border在宽度内 */
  margin-bottom: 5px; /* 输入框与按钮之间的间隔 */
}
.header-component {
  display: flex;
  height:100%;
  width: 100%;
  flex-direction: column;
  align-items: center;
  padding: 20px;
  background-color: #F4F2ED;
}

.search-container {
  position: relative;
  display: inline-block;
  margin-top: 30px;

}

.search-container i {
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  pointer-events: none; /* 防止点击图标时触发输入框的focus事件 */
}

.search-box {
  padding: 10px;
  font-size: 24px;
  border-radius: 22px;
  width: 652px;
  height: 61px;
  top: 122px;
  left: 634px;
  background-color: #D9D9D9;
  padding-left: 50px; /* 根据图标大小和间距调整 */
}
.navbar{
  display: flex;
  justify-content: center;
  width: 100%;
}

.container {
  display: flex;
  width:100%;
  flex-wrap: wrap;
  padding: 10px; /* 可选，为容器添加一些内边距 */
  height: 800px; /* 设置容器的高度 */
  overflow-y: auto; /* 当内容超出容器高度时，显示垂直滚动条 */
}

.column {
  flex: 1 0 10%; /* 调整为23%以考虑间隔 */
  margin-right: 2%; /* 列之间的间隔 */
  display: flex; /* 将列也设置为Flex容器 */
  flex-direction: column; /* 子元素垂直排列 */
  margin-left: 10px;
}
.column1 {
  flex: 1 0 10%; /* 调整为23%以考虑间隔 */
  margin-right: 2%; /* 列之间的间隔 */
  display: flex; /* 将列也设置为Flex容器 */
  flex-direction: column; /* 子元素垂直排列 */
  width: 30px;
  margin-left:100px;
}

.column:last-child {
  margin-right: 0; /* 清除最后一列的右边距 */
}

.box {
  /* 通用样式 */
  border-radius:36px;
  border: 1px solid #ccc;
  padding: 10px;
  background-color: #D9D9D9;
  margin-bottom: 10px; /* 盒子之间的垂直间隔 */
}

.large {
  height: 323px;
}

.medium {
  height:249px;
}

.small {
  height:193px;
}
.image-button {
  border: none;
  background-color: transparent;
  cursor: pointer;
  border-radius: inherit; /* 继承父元素的border-radius */
  overflow: hidden; /* 确保图片不会超出按钮范围 */
  padding: 0; /* 移除默认的padding */
  width: 100%;
  height: 100%;
}

.dialog {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background-color: #FFFFFF;
  border: 1px solid #ccc;
  padding: 20px;
  width: 981px; /* 更大的宽度 */
  height: 629px;
  z-index: 1000;
  display: flex;
  border-radius: 22px;
  flex-direction: column; /* 设置为列方向 */
  justify-content: space-between;
}

.dialog-close{
  position: absolute;
  top: 3vh; /* 距顶部10px */
  left: 51vw; /* 距左边10px */
  cursor: pointer; /* 鼠标悬停时显示指针，表示可点击 */
  z-index: 1000; /* 确保在对话框内容之上 */
}

.dialog-content {
  display: flex;
  flex-direction: row;
  height: 100%;
  justify-content: left;
  align-items: center;
  padding-top: 50px; /* 根据关闭按钮的高度调整 */
}

.dialog-image img {
  margin-left: 50px;
  width: 80%; /* 左侧图片宽度 */
  height: auto;
  border-radius: 36px;
}

.dialog-text {
  display: flex;
  flex-direction: column; /* 设置为列方向 */
  justify-content: space-between;
  align-items: stretch; /* 子项填充整个容器的宽度 */
  padding: 20px;
  border: 1px solid #ccc;
  border-radius: 10px;
  width: 500px; /* 或其他固定宽度 */
  height: 90%;
  background-color: #fff;
  margin-bottom: 50px;
  margin-top: 30px;
  margin-right: 50px;
}

.row {
  display: flex;
  margin-bottom: 10px; /* 行与行之间的间隔 */
  align-items: center; /* 可选，使子项在交叉轴上的对齐方式居中，对行内布局很有帮助 */
}

.row.text {
  justify-content: left; /* 文本行靠左显示 */
}

.row.text p {
  margin: 0; /* 移除默认的段落间距 */
}

.column {
  /* text-align: left; 文本居中对齐 */
}

/* 假设第一个.column包含图片，我们给它一个较大的宽度 */
.row .column:first-child {
  flex: 1 1 200px; /* flex-grow: 1, flex-shrink: 1, flex-basis: 200px; 意思是如果空间允许，可以增长，但最小宽度为200px */
}

/* 第二个.column包含姓名，可以设置一个较小的宽度 */
.row .column:nth-child(2) {
  text-align: left;
  flex: 0 0 100px; /* 宽度固定为100px，不增长也不缩小 */
}

/* 第三个.column包含按钮，也可以设置一个合适的宽度 */
.row .column:last-child {
  flex: 0 0 80px; /* 宽度固定为120px，适合放置按钮 */
}

.id-image img {
  width: 70px; /* 或者你想要的任何尺寸 */
  height: 70px; /* 保持宽高一致以形成圆形 */
  border-radius: 50%; /* 将边角设置为圆形 */
  object-fit: cover; /* 确保图片覆盖整个区域而不失真 */
  display: block; /* 移除图片下方的默认间隙（如果有的话） */
  margin: 0 auto; /* 可选：水平居中图片 */
}

.column input {
  flex:2;
  width: 100%; /* 输入框宽度填满列 */
  border-radius: 5px;
  box-sizing: border-box; /* 包含padding和border在宽度内 */
  margin-bottom: 5px; /* 输入框与按钮之间的间隔 */
}

.button-follow{
  width: 70%; /* 按钮宽度填满列 */
  padding: 8px;
  border: none;
  border-radius: 5px;
  cursor: pointer;
  background-color: #DDD9CF;
  color: white;
}

.button-follow:hover {
  background-color: rgba(168, 140, 75, 0.6);
}


.button-heart {
  display: flex; /* 使用Flexbox使图标和数字水平排列 */
  justify-content:center;
  width: 75px;
  align-items: center; /* 图标和数字垂直居中 */
  gap: 7px; /* 设置图标和数字之间的间隙 */
  padding: 5px 10px; /* 可选，增加按钮的内边距 */
}

/* 响应式设计（可选） */
@media (max-width: 800px) {
  .column {
    flex: 1 0 48%; /* 在较小屏幕上调整列宽 */
    margin-right: 4%;
  }

  .column:nth-child(even) {
    margin-right: 0; /* 清除偶数列的右边距 */
  }

  .column:last-child {
    margin-right: 0; /* 确保最后一列没有右边距，即使它不是偶数列 */
  }
}

@media (max-width: 600px) {
  .column {
    flex: 1 0 100%; /* 在更小的屏幕上，每列占据整行 */
    margin-right: 0;
  }
}

.floating-button {
    position: fixed;    /* 固定位置，不随滚动条移动 */
    bottom: 20px;       /* 距离视口底部20像素 */
    right: 20px;        /* 距离视口右边20像素 */
    width: 60px;        /* 设置宽度为60px */
    height: 60px;       /* 设置高度为60px */
    background-image: url(../../assets/communite/send_post.png);
    background-position: center;
    /* background-color: #ffcc00; 按钮背景色 */
    color: white;      /* 文字颜色 */
    border: none;       /* 无边框 */
    border-radius: 50%; /* 边框圆角设置为50%，使其完全圆形 */
    cursor: pointer;    /* 鼠标悬停时显示手形指针 */
    box-shadow: 0 4px 8px rgba(0,0,0,0.3); /* 添加阴影效果 */
    display: flex;      /* 使用Flex布局 */
    align-items: center; /* 垂直居中 */
    justify-content: center; /* 水平居中 */
    font-size: 20px;    /* 字体大小 */
    z-index: 1500;      /* 确保按钮在其他内容之上 */
  }

  .floating-button:hover {
    background-color: #0056b3; /* 鼠标悬停时的背景色 */
  }

</style>